<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jQuery-切换样式的操作</title>
    <script src="../node_modules/jquery/dist/jquery.js"></script>
    <script type="text/javascript">
        $(() => {
            var tag = true;
            $('.btnstyle').click(() => {
                if (tag) {
                    $('.btnstyle').addClass("btnstyleAdd")
                    $('div').filter('.divView').addClass('divView1')
                } else {
                    $('div').filter('.divView').removeClass('divView1')
                }
                tag = !tag;
            })

            $('#10086').click(function () {
                $('div').filter('.divView').toggleClass('divView1');
            })


        })

    </script>

    <style>
        .divView {
            background-color: #009aac;
            font-size: 20px;
            font-family: cursive;
        }

        .divView1 {
            background-color: #53195e;
            font-size: 30px;
            font-family: serif;
        }

        .btnstyle {
            color: blue;
            font-size: 22px;
            background-color: blueviolet;
        }

        .btnstyleAdd {
            background-color: yellowgreen;
            font-size: 20px;
        }
    </style>
</head>

<body>

    <div class="divView">
        文字
    </div>

    <button class="btnstyle">切换</button>
    <button class='btnstyle' id="10086">toggleClass按钮</button>

</body>

</html>